<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>My Blog</title>

    <th:block th:replace="header::common_header" />
        <link rel="stylesheet" href="/md-editor/css/editormd.preview.css" />
    <th:block th:replace="header::common_js" />
        <script src="/md-editor/editormd.min.js"></script>
        <script src="/md-editor/lib/marked.min.js"></script>
        <script src="/md-editor/lib/prettify.min.js"></script>
        <script type="text/javascript">
            $(function() {
                var testView = editormd.markdownToHTML("markdown-view", {
                    // markdown : "[TOC]\n### Hello world!\n## Heading 2", // Also, you can dynamic set Markdown text
                    // htmlDecode : true,  // Enable / disable HTML tag encode.
                    // htmlDecode : "style,script,iframe",  // Note: If enabled, you should filter some dangerous HTML tags for website security.
                });
            });
        </script>
    <script src="/js/question.js"></script>
</head>
<div th:insert="~{nav :: nav}"></div>


<div class="container-fluid main">
    <div class="row">
        <div class="col-lg-9 col-md-12 col-sm-12 col-xs-12">

            <!--正文-->
            <h2><span th:text="${question.title}"></span></h2>
            <span class="span-desc">
                作者：<span th:text="${question.user.name}"></span>
                发布时间：<span th:text="${#dates.format(question.getGmtCreate()*1000,'yyyy/MM/dd')}"></span>
                阅读数：<span th:text="${question.getViewCount()}"></span>
                </span>
            <hr>
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="markdown-view">
                <textarea th:text="${question.getDescription()}" style="display: none"></textarea>
            </div>
            <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12">

            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <span class="label label-info label-tag" th:each="tag : ${question.getTag().split(',')}">
                    <span class="glyphicon glyphicon-tag"></span>
                    <span class="label label-info" th:text="${tag}"></span>
                </span>
            </div>

            <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <a th:href="@{'/publish/'+${question.getId()}}" class="community-menu"
                   th:if="${session.user != null && question.getCreator() == session.user.getId()}">
                    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
                    编辑
                </a>
            </div>
            <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12">

            <!--评论列表-->
            <h4><span th:text="${question.commentCount}"></span>个回复数</h4>
            <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12 comment-sp">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 comment-list" th:each="comment : ${comments}">
                <div class="media">
                    <div class="media-left">
                        <a href="/profile/questions">
                            <img class="media-object img-rounded" th:src="${comment.user.avatarUrl}"
                                 th:alt="${comment.user.name}">
                        </a>
                    </div>
                    <div class="media-body">
                        <span class="media-heading" th:text="${comment.user.getName()}"></span>
                        <div><span th:text="${comment.getContext()}"></span></div>
                        <div class="menu">
                            <span class="glyphicon glyphicon-thumbs-up icon"></span>
                            <span class="glyphicon glyphicon-comment icon two-level-comment"
                                  th:data-id="${comment.id}"></span>
                            <span class="pull-right"
                                  th:text="${comment.getGmtModified()}"></span>
                        </div>

                        <!--二级评论-->
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 collapse second-level-comment" th:id="${'comment'+comment.id}">
                            <!--                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 comment-list"-->
                            <!--                                 th:each="comment : ${comments}">-->
                            <!--                                <div class="media">-->
                            <!--                                    <div class="media-left">-->
                            <!--                                        <a href="/profile/questions">-->
                            <!--                                            <img class="media-object img-rounded" th:src="${comment.user.avatarUrl}"-->
                            <!--                                                 th:alt="${comment.user.name}">-->
                            <!--                                        </a>-->
                            <!--                                    </div>-->
                            <!--                                    <div class="media-body">-->
                            <!--                                        <span class="media-heading" th:text="${comment.user.getName()}"></span>-->
                            <!--                                        <div><span th:text="${comment.getContext()}"></span></div>-->
                            <!--                                        <div class="menu">-->
                            <!--                                            <span class="pull-right"-->
                            <!--                                                  th:text="${#dates.format(comment.getGmtCreate()*1000,'yyyy/MM/dd')}"></span>-->
                            <!--                                        </div>-->
                            <!--                                    </div>-->
                            <!--                                </div>-->
                            <!--                            </div>-->
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 comment-sub">
                                <!--二级评论输入框-->
                                <form action="/comment" method="post" class="comment-sub-form">
                                    <input type="hidden" name="parentId" th:value="${comment.id}" class="sub-parent-id">
                                    <input type="text" class="form-control comment sub-content" name="content"
                                           placeholder="评论一下"/>
                                    <button type="button"
                                            class="btn btn-success comment-btn pull-right sub-comment-publish">评论
                                    </button>
                                </form>
                            </div>
                        </div>


                    </div>
                </div>
            </div>

            <!--评论输入框-->
            <form action="/comment" method="post" id="comment-form">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="media">
                        <div class="media-left">
                            <a href="/profile/questions">
                                <img class="media-object img-rounded" th:src="${session.user != null ? session.user.avatarUrl : '/img/21006050.png'}"
                                     th:alt="${session.user != null ? session.user.name : '/img/21006050.png'}">
                            </a>
                        </div>
                        <div class="media-body">
                            <span class="media-heading" th:text="${session.user != null ? session.user.getName() : '游客'}"></span>
                            </span>
                        </div>
                    </div>
                    <input type="hidden" name="parentId" th:value="${question.id}" id="parentId">
                    <!--                    <input type="hidden" name="type" value="1">-->
                    <textarea class="form-control comment" name="content" id="content" cols="30" rows="10"></textarea>
                    <button type="button" class="btn btn-success comment-btn pull-right" id="comment-publish">回复
                    </button>
                </div>
            </form>
        </div>
        <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12 profile">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <h2>发起人</h2>
                <div class="media">
                    <div class="media-left">
                        <a href="/profile/questions">
                            <img class="media-object img-rounded" th:src="${question.user.avatarUrl}"
                                 th:alt="${question.user.name}">
                        </a>
                    </div>
                    <div class="media-body">
                        <span class="media-heading" th:text="${question.user.getName()}"></span>
                        </span>
                    </div>
                </div>
            </div>
            <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <h2>相关问题</h2>
                <ul>
                    <li th:each="related : ${relatedQuestions}">
                        <a th:href="@{'/question/'+${related.getId()}}" th:text="${related.title}"></a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
</body>
</html>